<template>
	<div class="login-container">
		<div class="login-box">
			<div class="login-form">
				<div class="login-lang">
					<Lang />
				</div>
				<div class="login-title">
					{{ $t('login.ResetPassword') }}
				</div>
				<div v-show="showType == 1">
					<el-form ref="loginFormRef" :model="dataForm" :rules="loginRules" label-width="120px">
						<el-form-item :label="$t('login.EmailName')">
							{{ dataForm.email }}
						</el-form-item>
						<el-form-item :label="$t('login.NewPassword')" prop="new_password">
							<el-input v-model="dataForm.new_password" :placeholder="$t('login.EnterNewPassword')" autocomplete="new-password" show-password></el-input>
						</el-form-item>
						<el-form-item>
							<div class="mt20 w100">
								<el-button class="w100" type="primary" size="large" @click="onSubmit()" :loading="btnloading">{{$t('login.ConfirmModification')}}</el-button>
							</div>
						</el-form-item>
					</el-form>
				</div>
				<div v-show="showType == 2">
					<div class="mb50 w100 flex flexC mt50">
						{{$t('login.ResetEnd')}}
					</div>
					<div class="w100 flex flexC">
						<el-button type="primary" class="w30" size="large" @click="goLogin">{{ $t('login.goLogin') }}</el-button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { ElMessage } from 'element-plus'
import { postApi } from '@/api/api'
import { getUrlParam, showMsgByServer } from '@/utils/tool'
const { t } = useI18n()

const router = useRouter()
const loginFormRef: any = ref(null)
const btnloading = ref(false)
const showType = ref(1)
const clientWidthValue: any = ref(993)

const dataForm = ref({
	email: '',
	email_token: '',
	new_password: '',
})
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error(t('login.passTips')))
  } else {
    if (!/^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,}$/.test(value)) {
		callback(new Error(t('table.PasswordAuthentication')))
	} else {
		callback()
	}
  }
}
const loginRules = ref({
	new_password: [{ required: true, validator: validatePass, trigger: 'change' }],
})
// 提交修改
const onSubmit = () => {
	loginFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		console.log(dataForm.value)
		btnloading.value = true
		postApi('/api/client/email/reset/password', dataForm.value, t('axios.Submitting')).then((res: any) => {
			console.log(res)
			btnloading.value = false
			if(res.code == 200){
				showMsgByServer(res.data, 'success')
				showType.value = 2
			} else {
				ElMessage.error(res.message || res.data || t('opaError'))
			}
		}).catch((err: any) => {
			btnloading.value = false
			console.log(err)
		})
	})
}
// 跳转登录页面
const goLogin = () => {
	router.push({ path: '/login' })
}
onMounted(() => {
	clientWidthValue.value = document.body.clientWidth
	const email = getUrlParam('email')
	const email_token = getUrlParam('email_token')
	console.log(email)
	console.log(email_token)
	dataForm.value.email = email || ''
	dataForm.value.email_token = email_token || ''
})
</script>

<style lang="scss" scoped>
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100%;
	background: url('@/assets/back2.png') no-repeat center;
	background-size: cover;
}
.login-box{
	display: flex;
	box-shadow: 1px 1px 5px #F07C55;
	box-sizing: border-box;
	border-radius: 8px;
	overflow: hidden;
}
.login-intro {
	display: flex;
	flex-direction: column;
	width: 800px;
	height:320px;
	img{
		width:100%;
		height:100%;
	}
}
.login-intro h1 {
	color: var(--el-color-primary);
}
.login-intro .desc {
	color: rgb(113, 115, 112);
	line-height: 32px;
	padding: 15px 0;
}
.login-bg img {
	width: 520px;
}
.login-form {
	width: 530px;
	height:320px;
	background-color: #fff;
	flex: 0 1 auto;
	padding: 5px 40px;
	box-sizing: border-box;
	position: relative;
	:deep(.el-input) {
		height: 45px;
		.el-input__inner {
			padding: 10px 15px 10px 5px;
			height: 45px;
			line-height: 45px;
			color: #666;
			font-size: 16px;
		}
	}
	.login-lang{
		position: absolute;
		width: auto;
		height: auto;
		right: 10px;
		top: 10px;
		cursor: pointer;
	}
}
.login-title {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 90px;
	font-size: 24px;
	color: #444;
	letter-spacing: 4px;
	img{
		width:150px;
	}
}
.login-captcha {
	.login-captcha-div{
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	:deep() {
		.el-input{
			width: 220px;
			margin: 0;
		}
		.el-button{
			width: 120px;
			height: 45px;
		}
	}
}
.login-captcha img {
	width: 150px;
	height: 43px;
	margin-top: 5px;
	cursor: pointer;
}
.login-button {
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100%;
		height: 45px;
		font-size: 18px;
		letter-spacing: 8px;
		background-color: #F15924;
		border-color: #F15924;
		&:hover{
			opacity: 0.8;
		}
	}
}
// 切换的过来
.changeLogin{
	position: fixed;
	right: 0;
	top: 0;
	width: 60px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	img{
		width: 30px;
		height: 30px;
	}
	:deep(){
		.el-popper{
			min-width: 80px;
			height: 14px;
		}
	}
}
@media only screen and (max-width: 992px) {
	.login-intro {
		display: none;
	}
}
@media only screen and (max-width: 768px) {
	.login-container {
		background: #fff;
	}
	.login-intro {
		display: none;
	}
	.login-form {
		flex: 0 1 auto;
		border-radius: 0;
		box-shadow: none;
	}
	.login-captcha {
		:deep(.el-input) {
			width: 150px;
		}
	}
}
</style>
